<template>
  <div class="log_manage">
    <one-title title="日志管理" @refreshData="refresh">
    </one-title>
    <div class="fixed_top_56">
      <mes-search-comp
        :searchList="searchList"
        ref="mesSearch"
        :searchResult="searchResult"
        @searchInfo="_info">
      </mes-search-comp>
      <div class="table_container">
        <el-table
          :data="listData.list"
          border
          stripe
          ref="mesTable"
          v-loading="isLoading"
          style="width: 100%"
          :max-height="tableMaxHeight"
          @row-click="(row) => $refs.mesTable.toggleRowSelection(row)"
          @sort-change="_sort"
          :cell-class-name="setCellClass">
          <mes-col-comp
            :key="index"
            v-for="(column, index) in columnList"
            :column="column"
          ></mes-col-comp>
          <el-table-column
            fixed="right"
            :resizable="false"
            prop="id"
            label="操作"
            align="center"
            min-width="80"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="jump_item" @click="checkDetail(scope.row)">查看详情</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <mes-pagination
        @updateData="init"
        :currentPage="listData.pageNo"
        :total="listData.count || 0"
        :pageSize="listData.pageSize">
      </mes-pagination>
      <!--日志详情-->
      <log-details ref="LogDetail"></log-details>
    </div>
  </div>
</template>

<script>
import LogDetails from './components/LogDetails'
import tableColumns from './tableColumns'
export default {
  name: 'RecordDetail',
  components: {
    LogDetails,
  },
  data() {
    return {
      // 列表数据加载中
      isLoading: false,
      // 搜索参数
      searchData: {},
      // 搜索结果数
      searchResult: NaN,
      // 排序参数
      sortData: {},
      // 选中的数据
      selectData: [],
      // 表格列
      tableColumns: tableColumns,
    }
  },
  computed: {
    // 列表数据
    listData() {
      return this.$store.state.logManage.listData
    },
    // 发送方、接收方
    WebserviceName() {
      let WebserviceName = this.$store.state.dict.WebserviceName.labels || []
      return this.addLabelAll(WebserviceName)
    },
    // 发送状态
    booleanType() {
      let booleanType = this.$store.state.dict.WebServiceStatus.labels || []
      return this.addLabelAll(booleanType)
    },
    // 查询条件
    searchList() {
      let searchList = this.tableColumns || []
      return searchList
    },
    // 列循环
    columnList() {
      return this.tableColumns.filter(item => item.noForCol !== true && item.isShow !== false)
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    // 刷新方法
    refresh() {
      this.$refs.mesSearch.clean()
      this.$refs.mesTable.clearSort()
      this.searchData = {}
      this.sortData = {}
      this.init()
    },
    // 初始化
    init(page) {
      this.isLoading = true
      let pageObj = page || {
        pageNo: 1,
        pageSize: this.listData.pageSize || 15
      }
      let postData = {
        method: 'post',
        // url: 'a/webservicehistory/webserviceHistory/listWebserviceHistory',
        url: 'a/webservicehistory/webserviceHistory/list',
        data: {
          pageNo: pageObj.pageNo,
          pageSize: pageObj.pageSize
        },
        module: 'logManage',
        state: 'listData'
      }
      if (Object.keys(this.searchData).length > 0) {
        postData.data.query = this.searchData
      }
      if (Object.keys(this.sortData).length > 0) {
        postData.data.sort = this.sortData
      }
      this.$store.dispatch('saveData', postData).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
      }).finally(() => {
        this.isLoading = false
      })
    },
    // 搜索
    _info(data) {
      this.$refs.mesTable.clearSort()
      this.sortData = {}
      this.searchData = data
      this.init()
    },
    // 排序
    _sort(obj) {
      this.sortData = this.$getSortOrder(obj)
      this.init()
    },
    // 查看详情
    checkDetail(row) {
      this.$refs.LogDetail.openDialog(row)
    },
    // 设置单元格样式
    setCellClass({row, column}) {
      let isFail = row.successValue === 'False'
      if (isFail && column.property === 'successLabel') {
        return 'fail_status'
      }
    },
    /**
     * 提示
     * @param type 提示类型
     * @param str 提示内容
     */
    tipMessage(type, str) {
      this.$message({
        type: type,
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>

<style lang="less">
  td.fail_status {
    .mes_cell{
      color: #f8000f;
    }
  }
</style>
